<template>
	<div class="zy-content">
		<Row :gutter="24">
			<Col span="4" class="list-layout">
				<Tree :data="treeData" @on-select-change="treeChange"></Tree>
			</Col>
			<Col span="20">
				<div class="list-layout">
					<div class="btns clear">
						<span class="title">
							<RadioGroup v-model="searchParams.messageStatus" type="button" @on-change="changeNotice">
								<Radio label="">全部</Radio>
								<Radio :label="0">未读({{ noReadNum }})</Radio>
							</RadioGroup></span
						>
						<Button v-show="searchParams.messageStatus == 1" @click="makeRead('all')">全部标记为已读</Button>
						<!-- <Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button> -->
					</div>
					<div class="tableContent">
						<Table
							ellipsis
							ref="selection"
							class="resizable-table"
							border
							@on-column-width-resize="onColumnWidthResize"
							:columns="columnsList"
							:data="list"
							v-show="type == 'all'"
						>
							<template slot-scope="{ row }" slot="action">
								<span class="operationBtn" @click="checkDetail(row)">
									<i class="iconfont zy-common-bianji"></i>
									查看
								</span>
								<span class="operationBtn" @click="delRow(row)">
									<i class="iconfont zy-common-shanchu"></i>
									{{ $t('common.Delete') }}
								</span>
							</template>
						</Table>
						<detail-card :type="templateName.includes('预警')?'warning':'notice'" :rowDetail="rowDetail" v-show="type == 'detail'" @goBack="goBack"></detail-card>
					</div>
					<div class="pageWrap mt16">
						<pageLeftTitle :total="total" />
						<Page
							:total="total"
							:page-size="params.pageSize"
							:current="params.pageNum"
							@on-change="changePageNum"
							@on-page-size-change="changePageSize"
							show-sizer
						/>
					</div>
				</div>
			</Col>
		</Row>
		<commonModal ref="commonModal"></commonModal>
	</div>
</template>

<script>
// import ImportExcelModal from "@/components/importExcel.vue";
// import fileDownload from 'js-file-download';
import commonModal from '@/components/modalTypes/commonModal.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import DetailCard from './modules/checkDetail';
export default {
	components: { commonModal,DetailCard },
	mixins: [toggleTableOperation],
	computed: {
		treeData() {
			return [
				{
					title: '预警',
					expand: true,
					children: [
						{
							title: `工单预警(${this.warningInfo.workOrderWarning || 0})`,
							id: 1,
						},
						{
							title: `设备预警(${this.warningInfo.deviceWarning || 0})`,
							id: 2,
						},
						{
							title: `模具预警(${this.warningInfo.moldWarning || 0})`,
							id: 3,
						},
					],
				},
				{
					title: '消息',
					expand: true,
					children: [
						{
							title: `工单消息(${this.noticeInfo.workOrderWarning || 0})`,
							id: 1,
						},
						{
							title: `设备消息(${this.noticeInfo.deviceWarning || 0})`,
							id: 2,
						},
						{
							title: `模具消息(${this.noticeInfo.moldWarning || 0})`,
							id: 3,
						},
					],
				},
			];
		},
	},
	data() {
		return {
			params: {
				pageSize: 10,
				pageNum: 1,
			},
			src: '/dms/messageWarning/queryPadMessageList',
			noReadUrl: '/dms/messageWarning/queryEarlyTotalRead',
			markReadUrl: '/dms/messageWarning/updateMessageRead',
			searchParams: { messageStatus: '', templateType: null },
			type: 'all',
			buttonSize: '全部',
			noReadNum: 0, //未读数量
			columns: [
				{
					title: '内容',
					key: 'planContent',
					align: 'center',
					resizable: true,
				},
				{
					title: '时间',
					key: 'createTime',
					align: 'center',
					resizable: true,
				},
				{
					title: `${this.$t('common.operation')}`,
					slot: 'action',
					width: 200,
					// width: this.util.autoWidth(450, 600),
					align: 'center',
					fixed: 'right',
				},
			],
			total: 0,
			list: [],
			rowDetail: {},

			contextData: null,

			warningInfo: {},
			noticeInfo: {},
			templateName: '预警',
		};
	},
	created() {
		this.getTableColumnsWidth(this.columns);
	},
	mounted() {
		this.refush();
	},
	methods: {
		refush() {
			this.getEarlyWarningTotal();
			this.getEarlyNoticeTotal();
			this.getTotalRead();
			this.getList();
		},
		makeRead(type) {
			let data = [];
			if (type == 'all') {
				data = this.list.map((item) => item.id);
			} else {
				data.push(type);
			}
			this.axios({
				method: 'post',
				url: this.markReadUrl,
				data,
			}).then((res) => {
				this.refush();
				// this.$set(this, 'warningInfo', res.data);
			});
		},
		getTotalRead() {
			this.axios({
				method: 'get',
				url: this.noReadUrl,
				params: {
					templateType: this.searchParams.templateType,
				},
			}).then((res) => {
				this.noReadNum = res.data;
				console.log(res);
				// this.$set(this, 'warningInfo', res.data);
			});
		},
		getQueryTotalUnread1() {
			const searhParams = JSON.parse(JSON.stringify(this.searchParams));
			this.axios({
				method: 'get',
				url: '/dms/messageWarning/queryTotalUnread',
				params: {
					...searhParams,
				},
			}).then((res) => {
				console.log(res);
				// this.$set(this, 'warningInfo', res.data);
			});
		},
		getEarlyWarningTotal() {
			this.axios({
				method: 'get',
				url: '/dms/messageWarning/queryEarlyWarningTotal',
			}).then((res) => {
				this.$set(this, 'warningInfo', res.data);
			});
		},
		getEarlyNoticeTotal() {
			this.axios({
				method: 'get',
				url: '/dms/messageWarning/queryEarlyWarningInformationTotal',
			}).then((res) => {
				this.$set(this, 'noticeInfo', res.data);
			});
		},
		getList() {
			const searhParams = JSON.parse(JSON.stringify(this.searchParams));
			this.axios({
				method: 'get',
				url: this.src,
				params: {
					...this.params,
					...searhParams,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.list = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		changeNotice() {
			this.changeNum();
		},
		changeNum() {
			this.params.pageNum = 1;
			this.params.pageSize = 10;
			this.getList();
		},
		treeChange(val) {
			this.templateName = val[0].title;
			let url = '';
			if (val[0].title.includes('预警')) {
				this.src = '/dms/messageWarning/queryPadMessageList';
				this.noReadUrl = '/dms/messageWarning/queryEarlyTotalRead';
				this.markReadUrl = '/dms/messageWarning/updateMessageRead';
				url = '/dms/queryEarlyTotalRead';
			} else {
				this.src = '/dms/messageWarning/queryMessageInformationList';
				this.noReadUrl = '/dms/messageWarning/queryEarlyInformationTotalRead';
				this.markReadUrl = '/dms/messageWarning/updateMessageInformationRead';
				url = '/dms/queryEarlyInformationTotalRead';
			}
			this.searchParams.templateType = val[0].id;
			this.changeNum();
			this.getTotalRead();

			this.type='all';
		},
		checkDetail(row) {
			this.rowDetail = { ...row };
			if (row.messageStatus == 0) {
				this.makeRead(row.id);
			}
			this.type = 'detail';
		},
		goBack() {
			this.type = 'all';
		},
		delRow(row) {
			this.currentItem = row;
			this.$refs.commonModal.showModal({
				type: 'delete',
				title: '删除提醒',
				desc: '确认是否删除',
				submit: () => {
					this.axios({
						method: 'post',
						url: this.templateName.includes('预警') ? '/dms/messageWarning/deleteMessageById' : '/dms/messageWarning/deleteMessageInformationById',
						data: [row.id],
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.refush();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				},
			});
		},
		upIsRead() {
			this.$refs.commonModal.showModal({
				type: 'warn',
				title: '删除提醒',
				desc: '确认是否删除',
				submit: () => {
					this.axios({
						method: 'post',
						url: this.templateName.includes('预警') ? '/dms/messageWarning/deleteMessageById' : '/dms/messageWarning/deleteMessageInformationById',
						data: [row.id],
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.refush();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				},
			});
		},
		changePageNum(val) {
			this.params.pageNum = val;
			this.getList();
		},
		changePageSize(val) {
			this.params.pageSize = val;
			this.getList();
		},
		handleContextMenu(data) {
			this.contextData = data;
		},
	},
};
</script>

<style scoped></style>